<template>
  <!-- 仅当用户登录后显示侧边栏 -->
  <div v-if="LoginUserStore.loginUser.id" id="globalSider">
    <!-- 侧边栏触发器：小巧的按钮，位于左侧中间 -->
    <div class="sider-trigger" @mouseenter="showSider = true" :class="{ active: showSider }">
      <MenuFoldOutlined v-if="showSider" />
      <MenuUnfoldOutlined v-else />
    </div>

    <!-- 侧边栏主体：鼠标在侧边栏区域内不收回，离开才收回 -->
    <a-layout-sider
      class="main-sider"
      :width="200"
      :collapsed="!showSider"
      :collapsed-width="0"
      @mouseleave="showSider = false"
    >
      <a-menu
        mode="inline"
        v-model:selectedKeys="current"
        :items="items"
        @click="doChangeMenu"
        class="custom-menu"
      />
    </a-layout-sider>
  </div>
</template>

<script lang="ts" setup>
import { h, ref, computed, onMounted, watchEffect } from 'vue'
// @ts-ignore
import { MenuProps, message } from 'ant-design-vue'
import {
  HomeOutlined,
  UserOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined, TeamOutlined
} from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { useLoginUserStore } from '@/stores/userLogin'
import { SPACE_TYPE_ENUM } from '@/constants/space'
import { listMyTeamSpaceUsingPost } from '@/api/spaceUserController'

// 路由实例
const router = useRouter()
// 获取登录用户信息
const LoginUserStore = useLoginUserStore()

// 控制侧边栏显示/隐藏的状态
const showSider = ref(false)

// 定义原始菜单项数据 ( 固定值 )
const fixedMenuItems = [
  {
    key: '/',
    icon: () => h(HomeOutlined),
    label: '公共图库',
    title: '公共图库',
  },
  {
    key: '/space/check',
    icon: () => h(UserOutlined),
    label: '我的空间',
    title: '我的空间',
  },
  {
    key: `/space/add?type=${SPACE_TYPE_ENUM.TEAM}`,
    icon: () => h(TeamOutlined),
    label: '创建团队',
    title: '创建团队',
  },
]

// 获取登录用户信息
const loginUserStore = useLoginUserStore();

// ------------ 我的团队空间列表 -----------------
const teamSpaceList = ref<API.SpaceUserVO[]>([])
const menuItems = computed(() => {
  // 没有团队空间，只展示固定菜单
  if (teamSpaceList.value.length < 1) {
    return fixedMenuItems;
  }
  // 展示团队空间分组
  const teamSpaceSubMenus = teamSpaceList.value.map((spaceUser) => {
    const space = spaceUser.space
    return {
      key: '/space/' + spaceUser.spaceId,
      label: space?.spaceName,
    }
  })
  // 添加侧边栏团队空间分组
  const teamSpaceMenuGroup = {
    type: 'group',
    label: '我的团队',
    key: 'teamSpace',
    children: teamSpaceSubMenus,
  }
  // 集合侧边栏菜单项
  return [...fixedMenuItems, teamSpaceMenuGroup]
})

// 加载团队空间列表
const fetchTeamSpaceList = async () => {
  const res = await listMyTeamSpaceUsingPost()
  if (res.data.code === 0 && res.data.data) {
    teamSpaceList.value = res.data.data
  } else {
    message.error('加载我的团队空间失败，' + res.data.message)
  }
}

/**
 * 监听变量，改变时触发数据的重新加载
 */
watchEffect(() => {
  // 登录才加载
  if(loginUserStore.loginUser.id){
    fetchTeamSpaceList()
  }
})

/**
 * 过滤菜单项，根据用户角色显示不同菜单
 * @param menu 原始菜单项数组
 * @returns 过滤后的菜单项数组
 */
const filteredMenus = (menu = [] as MenuProps['items']) => {
  return menu?.filter((menu) => {
    // 筛选以/admin开头的路由，仅管理员可见
    if (menu?.key?.toString().startsWith('/admin')) {
      if (!loginUserStore.loginUser || loginUserStore.loginUser.userRole !== 'admin') {
        return false
      }
    }

    // 筛选以/picture开头的路由，仅登录用户可见
    if (menu?.key?.toString().startsWith('/picture')) {
      const loginUser = LoginUserStore.loginUser
      if (!loginUser || (loginUser.userRole !== 'user' && loginUser.userRole !== 'admin')) {
        return false
      }
    }

    // 递归过滤子菜单（如果有子项）
    // @ts-ignore
    if ('children' in menu && menu.children && menu.children.length > 0) {
      // @ts-ignore
      menu.children = filteredMenus(menu.children)
    }

    return true
  })
}

// 计算属性：获取过滤后的菜单项
const items = computed<MenuProps['items']>(() => filteredMenus(menuItems.value))

/**
 * 处理菜单点击事件，跳转到对应路由
 * @param key 菜单key，对应路由路径
 */
//@ts-ignore
const doChangeMenu = ({ key }) => {
  router.push(key)
}

// 当前选中的菜单项
const current = ref<string[]>(['/'])

// 监听路由变化，更新当前选中的菜单项
router.afterEach((to) => {
  current.value = [to.path]
})

// 页面挂载时，短暂显示侧边栏提示用户
onMounted(() => {
  if (LoginUserStore.loginUser.id) {
    setTimeout(() => {
      showSider.value = false
    }, 3000)
  }
})
</script>

<style scoped>
/* 侧边栏容器：改为固定定位，脱离文档流，始终贴在左侧 */
#globalSider {
  position: fixed; /* 关键：固定在屏幕左侧，不随页面滚动消失 */
  left: 0;         /* 贴紧左侧边缘 */
  top: 0;          /* 贴紧顶部 */
  height: 100vh;   /* 高度充满视口 */
  box-sizing: border-box;
  z-index: 999;    /* 确保在内容上方显示 */
}

/* 侧边栏触发器：缩小尺寸，固定在左侧中间 */
.sider-trigger {
  position: absolute;
  left: 0;
  top: 50%;          /* 垂直居中 */
  transform: translateY(-50%); /* 精准居中 */
  z-index: 2;        /* 确保在侧边栏上方 */
  width: 26px;       /* 缩小宽度（原40px） */
  height: 60px;      /* 缩小高度（原80px） */
  border-radius: 0 8px 8px 0; /* 圆角更小巧 */
  background: linear-gradient(180deg, #a5d6a7 0%, #81c784 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2e7d32;
  font-size: 16px;   /* 图标缩小 */
  cursor: pointer;
  /* 优化阴影：添加内阴影增强立体感，外阴影弱化 */
  box-shadow:
    2px 0 5px rgba(0, 0, 0, 0.08), /* 外阴影增强边缘感 */
    inset 0 0 3px rgba(255, 255, 255, 0.3); /* 内阴影增强按钮质感 */
  transition: all 0.3s ease;
}

/* 触发器激活状态 */
.sider-trigger.active {
  background: linear-gradient(180deg, #81c784 0%, #66bb6a 100%);
  color: #1b5e20;
  /* 激活状态增强阴影，突出显示 */
  box-shadow:
    2px 0 8px rgba(0, 0, 0, 0.12),
    inset 0 0 3px rgba(255, 255, 255, 0.4);
}

/* 侧边栏主体：优化渐变背景，高度充满视口，同样固定定位 */
.main-sider {
  position: fixed; /* 关键：固定在屏幕左侧，和容器保持一致 */
  left: 0;
  top: 0;
  height: 100vh !important; /* 高度充满视口 */
  background: linear-gradient(180deg, #f1f8e9 0%, #dcedc8 100%) !important; /* 柔和的绿色渐变背景 */
  transition: all 0.3s ease;
  /* 侧边栏阴影：右侧投影增强层次感，避免与内容区粘连 */
  box-shadow:
    2px 0 15px rgba(0, 0, 0, 0.07), /* 主阴影 */
    0 0 10px rgba(129, 199, 132, 0.15); /* 绿色系辅助阴影，增强主题融合度 */
  overflow: hidden; /* 防止内部元素（如菜单高亮）溢出侧边栏 */
}

/* 菜单容器：保持透明，不单独设置背景（继承侧边栏渐变） */
.custom-menu {
  background: transparent !important;
  border-right: none !important;
  padding: 20px 8px 20px 0; /* 右侧内边距减少，避免高亮溢出 */
}

/* 菜单项基础样式：不干扰背景渐变 */
:deep(.ant-menu-item) {
  margin: 12px 8px !important;
  border-radius: 6px !important;
  color: #2e7d32 !important;
  transition: all 0.2s ease !important;
  /* 菜单项基础阴影（默认隐藏，hover时显示） */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* 菜单项悬停：轻微高亮，不覆盖背景渐变 */
:deep(.ant-menu-item:hover) {
  background-color: rgba(129, 199, 132, 0.2) !important;
  /* 悬停时添加轻微阴影，增强浮起感 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateX(2px); /* 微小位移增强交互感 */
}

/* 当前选中项：突出显示但不破坏背景 */
:deep(.ant-menu-item-selected) {
  background-color: rgba(76, 175, 80, 0.15) !important;
  font-weight: 500 !important;
  /* 选中项增强阴影，突出当前位置 */
  box-shadow:
    0 2px 10px rgba(76, 175, 80, 0.15), /* 绿色系阴影增强主题感 */
    inset 0 0 3px rgba(255, 255, 255, 0.5); /* 内阴影增强层次感 */
}

/* 菜单图标阴影效果：增强图标立体感 */
:deep(.ant-menu-item-icon) {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}
</style>
